/* eslint-disable no-unused-vars */
/* eslint-disable class-methods-use-this */
/* eslint-disable no-param-reassign  */
/* eslint-disable prefer-const */
/* eslint-disable import/no-cycle */
import React, { Component } from 'react';
import BaseControl from './BaseControl';
import ToolBarDrap from '../common/ToolBarDrap';

// 占位符控件：允许修改部分内容，用于兼容旧表单部分控件。
class PlaceHolderControl extends BaseControl {
  static create(props, dataProps, extProps) {
    return new PlaceHolderControl(props, dataProps, extProps);
  }

  constructor(props, dataProps, extProps) {
    const dataProps2 = {
      title: '',
      type: 'PlaceHolder',
      ...dataProps,
    };
    super(props, dataProps2, extProps);
    this.name = '占位符';
    // this.icon = '';
  }

  getJsonValue(jsonValues) {
    return null;
  }

  setJsonValue(jsonValues) {}

  getPropertyTabs(parentForm) {
    return [...super.getPropertyTabs(parentForm)];
  }

  // 重写子元素（旧表单元素）属性
  rewriteChildren() {
    let { children, ...other } = this.props;
    let newprops = {};
    // 兼容form.item元素label修改,重写children 属性进行渲染
    if (this.data.title !== '' && this.data.title != null && children?.props?.label != null) {
      newprops = { label: this.data.title };
    }
    // 兼容form.item元素 隐藏标题
    if (!this.data.showTitle) {
      newprops = { label: '' };
    }
    // 重写子元素属性时
    if (Object.keys(newprops).length !== 0) {
      // 合并自定义属性
      newprops = { ...newprops, ...other };
      children = React.cloneElement(children, newprops);
    }
    return children;
  }

  render(parentForm) {
    const children = this.rewriteChildren();
    const item = (
      <div {...this.extProps} style={{ ...this.extProps?.style, ...this.authorityStyle(this.data.authority) }}>
        {children}
      </div>
    );
    if (parentForm?.isEditState && this.data.canEdit) {
      return (
        <div
          type={this.data.type}
          style={{
            width: `${this.data.widthPercent}%`,
            height: this.data.height === 0 ? 'auto' : `${this.data.height}px`,
            border: this.data.draggable ? '1px dashed red' : '1px dashed gray',
          }}
          onClick={(e) => {
            parentForm.clickControlEditProperty(e, this);
            e.stopPropagation();
          }}
          {...new ToolBarDrap.DragData(parentForm.tooldrap, {
            key: this.data.key,
            type: this.data.type,
          }).bindDrapStartEventProps(this.data.draggable)}
          key={this.data.key}
          ref={(ref) => {
            this.domNode = ref;
          }}
          onContextMenu={(e) => {
            parentForm.showControlMenu(e, { props: { key: this.data.key } });
          }}
          order={this.data.order}
        >
          {item}
        </div>
      );
    } else {
      return (
        <div
          style={{
            width: `${this.data.widthPercent}%`,
            height: this.data.height === 0 ? 'auto' : `${this.data.height}px`,
          }}
          key={this.data.key}
        >
          {item}
        </div>
      );
    }
  }
}

export default PlaceHolderControl;
